<template>
  <view class="category" ref="category">
    <YgSearch></YgSearch>
    <!-- 内容 -->
    <view class="main" ref="main">
      <!-- 菜单栏 -->
      <view class="menu">
        <view
          @tap="chgMenu(index)"
          :class="[`menu-item`, index === selectIndex ? `active` : ``]"
          v-for="(item, index) in menuList"
          :key="index"
          >{{ item }}</view
        >
      </view>
      <!-- 内容 -->
      <scroll-view :scroll-top="scrollTop" scroll-y="true" class="content">
        <!-- 一个菜单标题不同的项 -->
        <view class="group" v-for="item in goodsList" :key="item.cat_id">
          <!-- 项目标题 -->
          <view class="content-title">{{ item.cat_name }}</view>
          <!-- 项目内容 -->
          <view class="goods-content">
            <navigator
              v-for="item1 in item.children"
              :key="item1.cat_id"
              :url="`/pages/goods_list/goods_list?cid=${item1.cat_id}`"
            >
              <image :src="item1.cat_icon" mode="widthFix" />
              <view class="goods-name">{{ item1.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
let message = [];
export default {
  data() {
    return {
      // 菜单数据
      menuList: [],
      // 商品数据
      goodsList: [],
      // 选中的索引
      selectIndex: 0,
      scrollTop: 0,
    };
  },
  async onLoad() {
    
    // 返回 1970 年 1 月 1 日至今的毫秒数  new Date().getTime(); 
    // 数据
    let categoryMessage = uni.getStorageSync("categoryMessage");
    console.log(new Date().getTime() - uni.getStorageSync("categoryMessage").time);
    if (categoryMessage) {
      // 有数据
      // 小于三分钟  3分钟等于180000毫秒
      if (new Date().getTime() - categoryMessage.time < 180000) {
        // 用旧数据
        message = categoryMessage.message;
        // 菜单数据
        this.menuList = message.map((v) => v.cat_name);
        // 商品数据
        this.goodsList = message[0].children;
      } else {
        // 超过3分钟调用方法
        this.getCategoriesData();
      }
    } else {
      // 没数据 调用方法
      this.getCategoriesData();
    }
  },
  methods: {
    // 选中不同菜单事件
    chgMenu(index) {
      // 渲染不同的栏目数据
      this.goodsList = message[index].children;
      this.selectIndex = index;

      // 因为默认值就是0 0设置成0 他没效果 设置个无限接近为0的随机数
      this.scrollTop = (Math.random() * Math.random() * Math.random()) / 10000;
    },
    // 获取商品类别数据
    async getCategoriesData() {
      let time = new Date().getTime()
      const res = await this.$u.api.getCategoriesData();
      message = res.message;
      uni.setStorageSync("categoryMessage", {
        time,
        message,
      });
      // 菜单数据
      this.menuList = message.map((v) => v.cat_name);
      // 商品数据
      this.goodsList = message[0].children;
    },
  },
};
</script>

<style lang="scss" scoped>
.category {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .main {
    flex: 1;
    display: flex;
    overflow: hidden;
    .menu {
      width: 182rpx;
      overflow: auto;
      .menu-item {
        height: 74rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .active {
        border-left: 3rpx solid #eb4450;
        color: #eb4450;
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      .group {
        width: 100%;
        .content-title {
          height: 76rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: 700;
        }
        .goods-content {
          display: flex;
          flex-wrap: wrap;
          navigator {
            width: 33.33%;
            padding: 10rpx;
            box-sizing: border-box;
            text-align: center;
            image {
              width: 70%;
            }
            .goods-name {
            }
          }
        }
      }
    }
  }
}
</style>